<template>
	<view>
		<view class="wid-100 top-box" :style="{backgroundImage:backgroundUrl}">
			<view class="top-info d-flex j-sp center660 pad-t-50">
				<view class="left white-zt">
					<view class="font-32">余额</view>
					<view class="font-32 mar-top30">
						<text>¥</text>
						<text class="font-48 mar-left15 font-w-b">{{userInfo.money}}</text>
					</view>
				</view>
				<view class="right a-center border-r white-bj font-24 line-h55 pad-l-r-30 box-sizing">
					<view class="chengse-zt" @tap="open">余额明细</view>
					<view class="icon-jinru chengse-zt"></view>
				</view>
			</view>
			<view class="d-a-j-c mar-top40 font-22 pad-b-30 z-index55 white-zt">
				<view class="flex-1 a-center flex-column border-r-1-91">
					<view class="font-28 font-w-b">{{userInfo.my_recharge}}</view>
					<view class="mar-top15">个人充值</view>
				</view>
				<view class="flex-1 a-center flex-column">
					<view class="font-28 font-w-b">{{userInfo.give}}</view>
					<view class="mar-top15">平台赠送</view>
				</view>
			</view>
		</view>
		<!-- 充值 -->
		<view class="center710 white-bj border-r-30 overflow-hidden mar-top30 pad-b-40">
			<view class="title a-center">
				<view class="wid-50" @tap="tapbar('chong')"><image :src="imgList" mode="widthFix" lazy-load></image></view>
				<view class="wid-50" @tap="tapbar('dui')"><image :src="imgList1" mode="widthFix" lazy-load></image></view>
			</view>
			<!-- 充值 -->
			<view class="mar-top30 box-sizing pad-l-20 pad-r-20" v-if="Recharge">
				<view class="a-center font-28 line-h100 recharge-box overflow-hidden">
					<scroll-view scroll-x="true" class="ljm-swiper">
						<block v-for="(item,index) in recharge" :key="index">
							<view class="d-inline-block recharge-item position-relative text-center border-r-20" :class="{'active':item.id==rechargeId.id}" @tap="rechargeClick(item,index)">
								<view class="font-32 font-w-b">{{item.money}}元</view>
								<view class="font-24 black60-zt daozhang mar-top15">到账{{item.money+item.give}}元</view>
								<view class="deliver white-zt position-absolute">赠送{{item.give}}元</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<radio-group @change="changePay" class="pay-box">
					<view class="item a-center j-sp mar-top30" v-for="(item,index) in paylist" :key="index">
						<view class="a-center">
							<view class="img border-r-5 overflow-hidden"><image :src="item.pic" mode="widthFix" lazy-load></image></view>
							<view class="mar-left15 ">
								<view class="font-w-b font-28">{{item.name}}</view>
							</view>
						</view>
						<label class="radio"><radio :value="item.id" :checked="checked==item.id" style="transform: scale(0.77);"/></label>
					</view>
				</radio-group>
				<view class="mar-top30">
					<view class="font-28 chengse-bj border-r wid-100 line-h80 white-zt text-center" @tap="AddRechargerder">充值</view>
				</view>
			</view>
			<!-- 兑换 -->
			<view v-else class="mar-top40 box-sizing pad-l-20 pad-r-20">
				<view class="duihuan-box border-r-20 overflow-hidden pad-l-r-30 box-sizing">
					<input type="text" v-model="hexiao_code" placeholder="请输入兑换码" placeholder-class="plach"/>
				</view>
				<view class="font-24 line-h35 black60-zt mar-top30">
					<view>兑换提示：若您有鑫意到家充值卡，请按背面鑫意到家充值卡充值方式提示进行兑换充值！</view>
				</view>
				<view class="mar-top30">
					<view class="font-28 chengse-bj border-r wid-100 line-h80 white-zt text-center" @tap="echange">兑换</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:undefined,
				backgroundUrl:'',
				adminSet:{},
				userInfo:{
					money:"0.00",
					my_recharge:"0.00",
					give:"0.00"
				},
				imgList:"https://mjs-nbdz-com.oss-cn-hangzhou.aliyuncs.com/upload/video/20230918/202309181517035512.png",
				imgList1:"https://mjs-nbdz-com.oss-cn-hangzhou.aliyuncs.com/upload/video/20230918/202309181523370509.png",
				Recharge:true,
				paylist:[],
				rechargeId:{},
				checked:1,
				recharge:[],
				hexiao_code:""
			}
		},
		onLoad() {
			this.user_id=parseFloat(this.$user.state.userId)
			this.user()
			this.GetAdmin()
			this.getPayList()
			this.GetRechargeSet()
		},
		methods: {
			//进去余额明细
			open(){
				uni.navigateTo({
					url:'/pagesC/balance/balanceShow'
				})
			},
			//获取用户详情
			async user(){
				if(this.$user.state.token==""){
					return
				}else{
					const one={
						mid:parseFloat(this.$user.state.userId),
						aid:1
					}
					await this.$api.UserInfo(one).then(res=>{
						this.userInfo=res.data
					})
				}
				
			},
			//点击兑换
			async echange(){
				if(this.user_id<=0){
					uni.showToast({
						icon:'none',
						title:'登入超时！正在重新登入！',
						duration:2000
					})
					setTimeout(function(){
						login.Login()
					},1000)
					return
				}
				if(this.hexiao_code==""){
					uni.showToast({
						icon:'none',
						title:'请正确输入兑换码！',
						duration:2000
					})
					return
				}
				const one={
					aid:1,
					mid:this.user_id,
					hexiao_code:this.hexiao_code
				}
				await this.$api.RechargeExchange(one).then(res=>{
					if(res.code==0){
						uni.showToast({
							icon:"success",
							title:"充值成功！",
							duration:2000
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/my/my'
							})
						},1500)
					}
				})
			},
			//点击充值
			async AddRechargerder(){
				if(this.checked<=0){
					uni.showToast({
						icon:'none',
						title:'请选择支付方式！',
						duration:2000
					})
					return
				}
				if(this.rechargeId.id<=0){
					uni.showToast({
						icon:'none',
						title:'请选择充值金额！',
						duration:2000
					})
					return
				}
				let payData={}
				this.paylist.forEach(item=>{
					if(item.id==this.checked){
						payData=item
					}
				})
				const two={
					aid:1,
					mid:this.user_id,
					money:this.rechargeId.money,
					give:this.rechargeId.give,
					give_score:this.rechargeId.give_score,
					paytypeid:payData.id,
					paytype:payData.name,
					platform:"小程序"
				}
				await this.$api.AddRecharge(two).then(res=>{
					if(res.code==0){
						const hhh={
							payorderid:res.data.payorderid,
							ordernum:res.data.ordernum,
							orderid:res.data.orderid
						}
						this.$api.WxPayV3Api(hhh).then(element=>{
							uni.requestPayment({
								provider:"wxpay",
								timeStamp:element.data.timestamp,
								nonceStr:element.data.noncestr,
								package:element.data.package,
								signType:'MD5',
								paySign:element.data.sign,
								success:(item)=>{
									if(item.errMsg=="requestPayment:ok"){
										uni.showToast({
											icon:"none",
											title:"充值成功！",
											duration:2000
										})
										uni.showLoading({
											title:"支付中..."
										})
										setTimeout(()=>{
											this.GetUserInfo()
											uni.hideLoading()
											this.close()
										},2000)
									}
								}
							})
						})
					}
				})
			},
			//获取系统基本信息
			async GetAdmin(){
				const one={
					id:1
				}
				await this.$api.GetAdminSet(one).then(res=>{
					this.adminSet=res.data.list
					this.backgroundUrl="url('"+res.data.list.balance_img+"')"
				})
			},
			//获取支付列表
			async getPayList(){
				const one={
					aid:1,
					id:1,
					state:1
				}
				await this.$api.GetPayList(one).then(res=>{
					this.checked=res.data.list[0].id
					this.paylist=res.data.list
				})
			},
			//获取充值信息
			async GetRechargeSet(){
				const one={
					id:1
				}
				await this.$api.GetRecharge(one).then(res=>{
					if(res.data.list!=null){
						this.recharge=JSON.parse(res.data.list.givedata)
						this.recharge.forEach((item,index)=>{
							item.id=index+1
							item.money=parseFloat(item.money)
							item.give=parseFloat(item.give)
							item.give_score=parseFloat(item.give_score)
						})
					}
					console.log(this.recharge)
					this.rechargeId=this.recharge[0]
				})
			},
			//监听选择支付方式
			changePay(e){
				this.checked=parseFloat(e.detail.value)
			},
			//点击选择充值
			rechargeClick(id,index){
				this.rechargeId=id
			},
			//切换充值方式
			tapbar(type){
				switch (type){
					case "chong":
						if(this.Recharge){return}
						this.imgList="https://mjs-nbdz-com.oss-cn-hangzhou.aliyuncs.com/upload/video/20230918/202309181517035512.png"
						this.imgList1="https://mjs-nbdz-com.oss-cn-hangzhou.aliyuncs.com/upload/video/20230918/202309181523370509.png"
						this.Recharge=true
					break;
					case "dui":
						if(!this.Recharge){return}
						this.imgList="https://mjs-nbdz-com.oss-cn-hangzhou.aliyuncs.com/upload/video/20230918/202309181530302094.png"
						this.imgList1="https://mjs-nbdz-com.oss-cn-hangzhou.aliyuncs.com/upload/video/20230918/202309181529158956.png"
						this.Recharge=false
					break;
				}
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	.top-box{
		height: 324rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		.right{
			height: 55rpx;
		}
	}
	.recharge-box{
		.recharge-item{
			width: 220rpx;
			padding: 35rpx 0;
			border: 2rpx solid #e6e6e6;
			margin-right: 20rpx;
			&:last-child{
				margin-right: 0rpx;
			}
			&.active{
				background: #fdf0e1;
				border: 2rpx solid #f37c4d;
				color: #ff4730;
				.daozhang{
					color: #ff4730 !important;
				}
			}
			.deliver{
				background: linear-gradient(270deg, #f37c4d 0%, #ff4730 100%);
				border-top-left-radius: 100rpx;
				border-top-right-radius: 100rpx;
				border-bottom-right-radius: 100rpx;
				padding: 6rpx 13rpx;
				top: 0;
				right: -20rpx;
				font-size: 18rpx;
				line-height: 18rpx;
			}
		}
	}
	.plach{
		color: #f37c4d;
		font-size: 26rpx;
		line-height: 80rpx;
		height: 80rpx;
	}
	.duihuan-box{
		border: 2rpx solid #f37c4d;
		input{
			line-height: 80rpx;
			font-size: 26rpx;
			height: 80rpx;
		}
	}
</style>
